import React, { useReducer } from 'react';

type defaultType = typeof defaultState;
// 两种 action的type类型声明
type ActionType = { type: "UPDATE_NAME", payload: string } | { type: "UPDATE_AGE", payload: number };

const defaultState = { name: "刘凯欣", age: 18 };

export const ReducerFun:React.FC = () => {
    // 理论铺垫
    // const [state,dispatch] = useReducer(reducer,initState,initAction)
    // initState,初始数据；
    // initAction,处理初始化数据 如果return 就 把值 给state 如果没有 就使用initState
    // dispatch 用于修改数据；执行dispatch 会触发 reducer,reducer 会返回一个新状态
    // reducer 会中在去更新 state
   



    const initAction = (e: defaultType) => {
        console.log("执行初始化");
        // 给年龄加1
        return { ...e, age: e.age + 1 }
    }


    // 点击button按钮：调用dispatch 会触发 reducer函数；并且返回新值；
    // 在reducer函数的形参中
    // 第一个参数 永远都是上一次的旧状态，第二个参数为 dispatch传递的参数结合
    const reducer = (prevState: defaultType, action: ActionType) => {
        console.log("执行修改");
        switch (action.type) {
            case "UPDATE_NAME":
                return { ...prevState, name: action.payload }
            case "UPDATE_AGE":
                return { ...prevState, age: prevState.age + action.payload }
            default:
                return prevState;

        }
    }
    // 下面为  针对 理论知识的 3种情况：
    // const [state] = useReducer(reducer,defaultState); //没有 第三个参数的清况初始值 直接赋值给 state
    // const [state] = useReducer(reducer,defaultState,initAction); //由第三个参数，对初始值进行修改后，在赋值给state;
    const [state, dispatch] = useReducer(reducer, defaultState, initAction); //由第三个参数，对初始值进行修改后，在赋值给state;

    console.log(state);

    return (
        <>
            <div>Reducer{JSON.stringify(state)}</div>
            <button onClick={() => {
                dispatch({ type: "UPDATE_NAME", payload: "刘凯欣2" });
            }}>点击修改 state值的名字</button>
            <button onClick={() => {
                dispatch({ type: "UPDATE_AGE", payload: 1 })
            }}>点击修改 state值的年龄</button>
        </>
    )
}